<template>
  <div class="main">
    <div class="select">
      <div class="nameinfo">
        <div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="小区名称:">
              <el-select
                clearable
                @change="(val) => selectchange(val, 2, 'buildNolist')"
                filterable
                v-model="communityNamevalue"
                placeholder="请选择"
                class="type"
              >
                <el-option
                  v-for="item in communityNamelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </div>
        <div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="楼号:">
              <el-select
                clearable
                @change="(val) => selectchange(val, 3, 'roomNo')"
                filterable
                v-model="buildNovalue"
                placeholder="请选择"
                class="type"
              >
                <el-option
                  v-for="item in buildNolist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </div>
        <div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="室号:">
              <el-select
                filterable
                v-model="roomNovalue"
                placeholder="请选择"
                class="type"
              >
                <el-option
                  v-for="item in roomNolist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-form>
        </div>
      </div>
    </div>
    <div class="buttom">
      
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="searchinfo">查询</el-button>
    </div>
    <div class="content">
      <div class="content-title">
        <span>查询列表</span>
        <span>
          <el-button @click="exportBuildList">导出</el-button
          ><el-button @click="downloadBuildModel"> 模板下载</el-button
          ><el-button @click="dialogVisible = true"
            >导入<i class="el-icon-upload el-icon--right"></i
          ></el-button>
          <el-button type="primary" @click="addinfo">新增</el-button>
        </span>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="communityName" label="小区名称" width="180">
        </el-table-column>
        <el-table-column prop="buildNo" label="楼号" width="180">
        </el-table-column>
        <el-table-column prop="roomNo" label="室号"> </el-table-column>
        <el-table-column width="180" prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="Editinfo(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="Deleteinfo(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="导入管理" :visible.sync="dialogVisible" width="30%">
        <el-upload
          ref="upload"
          :show-file-list="true"
          :multiple="false"
          :limit="1"
          drag
          :on-change="handleChange"
          accept=".xls,xlsx"
          class="upload"
          :auto-upload="false"
          :file-list="file"
          action=""
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
        </span>
      </el-dialog>

      <div class="block">
        <Pagination
          :total="page_total"
          @pageChange="pageChange"
          :page="page"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { exportExcel } from "../../utils/util";
export default {
  name: "buildingList",
  data() {
    return {
      communityNamelist: [],
      buildNolist: [],
      roomNolist: [],
      communityNamevalue: "",
      buildNovalue: "",
      roomNovalue: "",
      page: {
        page_index: 1,
        page_limit: 10,
      },
      page_total: null, //总条数
      tableData: [],
      dialogVisible: false,
      file: [],
    };
  },
  mounted() {},
  created() {
    this.initpage();
    let params = {
      // parentId: "1",
      level: "1",
    };
    this.getSubBuildList(params, "communityNamelist");
  },
  computed: {
    // 计算属性的 getter
    // buildNolist: function () {
    //   if(this.communityNamevalue)
    //   // `this` 指向 vm 实例
    //   return this.message.split('').reverse().join('')
    // }
  },
  methods: {
    async getSubBuildList(params, target) {
      let { data } = await this.$ajax.lu.getSubBuildList(params);
      console.log(data);
      this[target] = data;
    },
    getName(id, list) {
      let current = this[list].find((item) => (item.id == id));
      return current ? current.name : "";
    },
    async initpage() {
      let params = {
        // parentId: "1",
        communityName: this.getName(this.communityNamevalue, "communityNamelist"),
        buildNo: this.getName(this.buildNovalue, "buildNolist"),
        roomNo: this.getName(this.roomNovalue, "roomNolist"),
        pageNo: String(this.page.page_index),
        pageSize: String(this.page.page_limit),
      };
      console.log(params);
      let { data } = await this.$ajax.lu.getBuildList(params);
      console.log(data);
      this.tableData = data.list;
      this.page_total = data.total;
    },
    searchinfo() {
      this.initpage();
    },
    async selectchange(val, type, target) {
      if (val) {
        const parentId = "" + val;
        const level = "" + type;
        const params = { parentId, level };
        this.getSubBuildList(params, target);
        if (type == 2) {
          this.buildNovalue = null;
          this.roomNovalue = null;
        } else {
          this.roomNovalue = null;
        }
      } else {
        // if (type == 2) {
        //   this.buildNolist = [];
        //   this.roomNo = [];
        // }
        // if (type == 3) {
        //   this.roomNo = [];
        // }
        if (type == 2) {
          this.buildNovalue = null;
          this.buildNolist = [];
        }
        this.roomNovalue = null;
        this.roomNo = [];
      }
    },
    async exportBuildList() {
      // this.initpage();
      this.$ajax.lu.exportBuildList().then((data) => {
        exportExcel(data, "居委会所属楼栋信息.xls");
      });
    },
    async downloadBuildModel() {
      // this.initpage();
      this.$ajax.lu.downloadBuildModel().then((data) => {
        exportExcel(data, "居委会所属楼栋信息模板.xls");
      });
    },

    handleChange(file) {
      this.file = file.raw;
    },
    //自定义文件上传
    async submitFileForm() {
      var formData = new FormData();
      formData.append("file", this.file);
      console.log(this.file);
      let { code } = await this.$ajax.lu.uploadBuildList(formData);
      this.dialogVisible = false;
      this.file = [];
      this.initpage();
    },
    reset() {
      this.communityNamevalue = "";
      this.buildNovalue = "";
      this.roomNovalue = "";
      this.form = [];
    },
    pageChange(item) {
      console.log(item);
      this.page.page_index = item.page_index;
      this.page.page_limit = item.page_limit;
      //改变页码，重新渲染页面
      this.initpage();
    },
    Editinfo(index, row) {
      this.$router.push({
        name: "editbuilding",
        query: { info: JSON.stringify(row) },
      });
      console.log(row, 8999);
    },
    async Deleteinfo(index, row) {
      console.log(row);
      var params = new FormData();
      params.append("id", row.id);
      let { msg } = await this.$ajax.lu.delBuildingInfo(params);
      console.log(msg);
      this.tableData.splice(index, 1);
    },
    addinfo() {
      this.$router.push({ name: "editbuilding", query: { type: "addinfo" } });
    },
  },
};
</script>

<style scoped>
.main {
  padding: 10px;
}
.nameinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* align-item center */
}
.buttom {
  padding-top: 35px;
  padding-right: 62px;
  /* width: 500px; */
  text-align: right;
}
.select {
  padding: 30px 64px 0px;
}
.content {
  padding: 95px 54px 30px;
}
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
}
.block {
  padding-top: 35px;
  text-align: right;
}
.upload-demo {
  diaplay: inline-block;
}
</style>
